<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布、删除文章</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <!-- 导入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入qs -->
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>
</head>
<body>
    <div id="app">
        <!-- 登录页面 -->
        <div v-if='!token'>
            <el-button @click='show_login_dialog()'>登录</el-button>
            <!-- 模态框 -->
            <el-dialog title="登录" :visible.sync="dialog_login">
                <el-form :model="form_login">
                    <el-form-item label="用户名" :label-width="formLabelWidth_login">
                        <el-input v-model="form_login.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth_login">
                        <el-input v-model="form_login.password" show-password></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialog_login = false">取 消</el-button>
                  <el-button type="primary" @click="to_login()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 文章列表 -->
        <div v-else>
            <el-button @click='show_save_dialog()'>发布文章</el-button>
            <!-- 发布文章的对话框 -->
            <el-dialog title="发布文章" :visible.sync="dialog_save">
                <!-- {{form}} -->
                <el-form :model="form">
                    <el-form-item label="标题" :label-width="formLabelWidth_save">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="发表内容" :label-width="formLabelWidth_save">
                        <el-input v-model="form.content"></el-input>
                    </el-form-item>
                    <el-form-item label="所属分类" :label-width="formLabelWidth_save">
                        <el-select v-model="form.categoryId" placeholder="请选择分类">
                            <el-option  v-for='item in tableData' :key='item.id' :label='item.categoryId' :value='item.categoryId'></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialog_save = false">取 消</el-button>
                  <el-button type="primary" @click="save()">发 布</el-button>
                </div>
            {{form}}
            </el-dialog> 
            <!-- 文章列表 -->
            <el-table
            :data="tableData"
            style="width: 100%">
                <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="文章标题"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="文章内容">
                </el-table-column>
                <el-table-column
                    prop="publishTime"
                    label="发布时间">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template v-slot='scope'>
                        <el-button @click='delete_article(scope.row.id)'>删除</el-button>
                    </template>
                </el-table-column>
            </el-table> 
            <!-- 分页按钮 -->
            <el-pagination
                background
                layout="prev, pager, next"
                :page-size='obj.pageSize'
                :current-page='obj.page'
                @current-change='change'
                :total="total1">
            </el-pagination>
        </div>
    </div>
    <script>
        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
            // console.log(config.headers,'-----');
            config.headers['Authorization'] = localStorage.getItem('token');//向请求头中新增一个键值对
            return config;
        }, function (error) {
        // 对请求错误做些什么
            return Promise.reject(error);
        });
        new Vue({
            el:'#app',
            data(){
                return {
                    token:localStorage.getItem('token'),
                    dialog_login:false,
                    dialog_save:false,//控制模态框显示或隐藏
                    form_login:{},
                    formLabelWidth_login:'120px',
                    formLabelWidth_save:'120px',
                    obj:{
                        // 默认打开页数，每页文章数
                        page:1,
                        pageSize:2,
                    },
                    tableData:[],
                    total1:0,
                    form:{}
                }
            },
            //Vue中的生命周期函数
            created(){
                this.page_quary_article();
            },
            //监听器
            // 当监听的变量发生变化时,执行监听中的代码
            watch:{
                obj:{
                    handler:function(){
                       this.page_quary_article();
                    },
                    deep:true,//表示深度监听
                }
            },
            methods:{
                show_login_dialog(){
                    this.dialog_login = true;
                },
                show_save_dialog(){
                    this.dialog_save = true;
                },
                // 登录
                to_login(){
                    axios({
                        url:'http://39.107.221.142:8001/user/login',
                        method:'post',
                        data:this.form_login
                    }).then((res)=>{
                        // 关闭模态框
                        this.dialog_login = false;
                        // 切换页面
                        this.token = res.data.data.token;
                        // 将token存储到浏览器中
                        localStorage.setItem('token',res.data.data.token);
                    })
                },
                //分页查询文章
                page_quary_article(){
                    axios({
                        url:'http://39.107.221.142:8001/article/pageQuery',
                        method:'get',
                        params:this.obj
                    }).then((res)=>{
                        this.total1 = res.data.data.total;
                        this.tableData = res.data.data.list;
                    })
                },
                // 发布文章
                save(){
                    axios({
                        url:'http://39.107.221.142:8001/article/saveOrUpdate',
                        method:'post',
                        data:Qs.stringify(this.form)
                    }).then((res)=>{
                        this.dialog_save = false;
                        if(res.data.status==200){
                            this.$notify({
                            title: '成功',
                            message: '发布成功',
                            type: 'success'
                            });
                        }
                        else{
                            this.$notify.error({
                                title: '错误',
                                message: res.data.message
                            });
                        }
                        this.page_quary_article();
                    })
                },
                //删除文章
                delete_article(id){
                    var obj1 ={
                        id :id,
                    }
                    axios({
                        url:'http://39.107.221.142:8001/article/deleteById',
                        method:'get',
                        params:obj1
                    }).then((res)=>{
                        if(res.data.status==200){
                            this.$notify({
                            title: '成功',
                            message: '删除成功',
                            type: 'success'
                            });
                        }
                        else{
                            this.$notify.error({
                                title: '删除失败',
                                message: res.data.message
                            });
                        }
                        this.page_quary_article();
                    })
                },
                //页码改变
                change(page){ 
                    this.obj.page = page;
                }
            }
        })
    </script>
</body>
</html>